<template>
    <VCard hover class="position-relative">
        <div class="tips position-absolute top-0 left-0 pa-5 overflow-hidden">
            <!-- <v-chip size="x-small" class="tips-item rounded-sm mr-1">首发</v-chip> -->
        </div>
        <div v-if="product.image">
            <v-img height="200px" cover :src="product.image"></v-img>
        </div>
        <div class="pa-5" v-else>
            <v-img height="160px" :src="cardImg"></v-img>
        </div>
        <v-divider />
        <VCardItem>
            <VCardTitle>{{ product.name }}</VCardTitle>
        </VCardItem>
        <!-- <VCardSubtitle class="text-caption">
                  {{ product.description }}
                </VCardSubtitle> -->
        <VCardText class="d-flex justify-space-between align-center flex-wrap">
            <div class="pa-0">
                <span class="text-subtitle-1">{{ product.price }}</span>
                <span class="ml-2 text-decoration-line-through text-caption">{{ product.price }}</span>
            </div>

            <VCardActions>
                <VBtn @click="goToDetail" color="primary" variant="outlined">
                    查看详情
                </VBtn>
            </VCardActions>
        </VCardText>
    </VCard>
</template>
<script setup>
import cardImg from '~/assets/images/card.png'
import { useRouter } from 'vue-router'

const props = defineProps({
    product: {
        type: Object,
        default: () => ({})
    }
})

const router = useRouter()

/**
 * 跳转到商品详情页
 */
const goToDetail = () => {
    if (props.product?.id) {
        router.push(`/product/${props.product.id}`)
    }
}

// console.log(props.product)
</script>
<style lang="scss" scoped>
.tips-item {
    z-index: 1;
    background-color: #ffeeec;
    color: #fb4167;
}
</style>